<template>
  <transition name="section">
    <section v-if='visible'>

      <div class="xAxis-tag-wrap">
        <el-tag
          :closable="true"
          :close-transition="false"
          @close="handleClose"
          v-show='visible'
          type="primary"
          :style="margin"
        >
            {{tagName}}
        </el-tag>
      </div>

      <transition-group tag='ul' name="ul" class="number-wrap">
        <li v-for ='(k,i) in list' :key='k.id'>
          <el-input-number
            v-model="k.start"
            size="small"
            :max='200'
            style="width:110px"
            @change='emitData'
            @mouseleave.native.stop ='helpAddOne(i)'
            :min="0">
          </el-input-number>
            -
          <el-input-number
            v-model="k.end"
            size="small"
            style="width:110px"
            :max='200'
            @change='emitData'
            @mouseleave.native.stop ='helpAddOne(i)'
            :min ='1'>
          </el-input-number>
          
          <span class="handle">
            <a v-if='i == list.length -1' @click.stop = 'addList'>增加</a>
            <a @click.stop = 'removeList(i)'>删除</a>
          </span>
          
        </li>
      
      </transition-group>
    </section>
  </transition>

</template>

<script>
import Vue from 'vue'
import { InputNumber } from 'element-ui'
Vue.use(InputNumber)
export default {
	props: {
		tagName: {
			type: String,
			default: ''
		},
		visible: {
			type: Boolean,
			default: false
		},
		margin: {
			type: String,
			default: 'margin-right:70px'
		}
	},
	data () {
		return {
			list: []
		}
	},
	watch: {
		visible (newValue) {
			newValue == false && this.handleClose()
			newValue == true && this.addList()
		}
	},
	methods: {
		helpAddOne (i) {
			this.$nextTick(() => {
				if (this.list[i].start == this.list[i].end) {
					setTimeout(() => {
						this.list[i].end++
					}, 300)
				}
			})
		},
		removeList (i) {
			this.list.splice(i, 1)
			this.list.length == 0? this.handleClose():this.emitData()
		},
		addList () {
			this.list.push({ start: '', end: '', id: Math.random() })
			this.emitData()
		},
		handleClose () {
			this.$emit('update:visible', false)
			this.list = []
			this.emitData()
		},
		emitData () {
			this.$nextTick(() => {
				this.$emit('getTime', this.transFormTime(this.list))
			})
		},
		transFormTime (list) {

			if (!list.length) { return '' }

			let result = []

			list.forEach((ele, i) => {
				if (!ele.start && !ele.end) {

				} else if (ele.start == ele.end) {
					result.push(`${ele.start}~${parseFloat(ele.end) + 1}`)
				}
				else if (ele.start > ele.end) {

					result.push(`${ele.end}~${ele.start}`)
				} else {
					result.push(`${ele.start}~${ele.end}`)
				}
			})

			return [...new Set(result)].join(',')
		},
	},
}
</script>

<style scoped lang='less'>
.section-enter-active {
  transition: all 0.4s;
}

.section-leave-active {
  transition: all .4s;
}
.section-enter {
  opacity: 0;
  transform: translateY(-50px);
}

.section-leave-to {
  opacity: 0;
  transform: translateX(200px);
}
section {
  margin: 30px 0;
  width: 900px;
  overflow: hidden;

  & > .xAxis-tag-wrap {
    float: left;
  }

  & > .number-wrap {
    float: left;
    width: 700px;
    overflow: hidden;
    .ul-enter-active {
      transition: all 0.4s;
    }

    .ul-leave-active {
      transition: all 0.4s;
    }
    .ul-enter {
      opacity: 0;
      transform: translateY(30px);
    }

    .ul-leave-to {
      opacity: 0;
      transform: translateX(-100px);
    }
    & > li {
      margin-bottom: 20px;
      display: inline-block;
    }

    & > li:last-of-type,
    & > li:nth-last-of-type(2) {
      margin-bottom: 0px;
    }

    & > li:nth-of-type(2n + 1) {
      padding-right: 80px;
    }
    .handle {
      a {
        margin-left: 6px;
        cursor: pointer;
      }
      & > a:first-of-type {
        color: #38f;
      }

      & > a:last-of-type {
        color: rgb(255, 91, 91);
      }
    }
  }
}
</style>